<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>姥爷生日快乐！</title>
    <link rel="stylesheet"href="laoye.css">
    <style>
        .envelope-wrapper {
            position: relative;
            left: -14%;
            top: 50%;
            perspective: 1000px;
            animation: flyIn 3s ease-out forwards;
        }
        .envelope {
            position: relative;
            width: 300px;
            height:200px;
            transform-style: preserve-3d;
        }
        .envelope-front {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: goldenrod;
            border: 2px solid sandybrown;
            border-radius: 0 0 10px 10px;
            border-top: none;
            z-index: 2;
        }
        .envelope-flap {
            position:absolute;
            top: -70px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 150px solid transparent;
            border-right: 150px solid transparent;
            border-bottom: 70px solid goldenrod;
            z-index: 3;
        }
        .envelope:hover.envelope-flap{
            transform: rotate(-180deg);
        }

        .message {
            position: absolute;
            top: 17px;
            left: 13px;
            width: calc(100%-40px);
            transform:none;
            padding: 20px;
            background-color: #fff;
            border: 1px solid lightskyblue;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            font-size: 14px;
            line-height: 1;
            z-index: 9;
        }
        @keyframes flyIn {
            0% {
                transform: translate(0, 0) rotate(45deg);
                opacity: 0;
            }
            100% {
                transform: translate(calc(50vw - 100px), calc(50vh - 70px)) rotate(0deg);
                opacity: 1;
            }
        }
        .envelope:hover::after {
            transform: rotateX(180deg);
        }
        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(2deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="content">
        <div class="envelope-wrapper">
            <div class="envelope">
                <div class="envelope-front"></div>
                <div class="envelope-flap"></div>
                <div class="message">
                    姥爷生日快乐！
                    福如东海、寿比南山;日月昌明、松鹤长春;笑口常开、天伦永享。
                    为了健康，请记得按时吃饭;为了快乐，请记住常开笑颜;把你思念，短信传情不中断;给你祝愿，愿你幸福平安到永远。
                </div>
            </div>
        </div>
        <div class="maple-leaf"></div>
        <div class="maple-leaf"></div>
        <div class="maple-leaf"></div>
        <div class="maple-leaf"></div>
        <div class="maple-leaf"></div>
        <div class="maple-leaf"></div>
        <div class="maple-leaf"></div>
        <div class="maple-leaf"></div>
        <div class="maple-leaf"></div>
        <div class="maple-leaf"></div>
        <div class="light" style="left: 3%; top: 67%;"></div>
        <div class="light" style="left: 66%; top: 55%;"></div>
        <div class="light" style="left: 93%; top: 15%;"></div>
        <div class="light" style="left: 14%; top: 20%;"></div>
        <div class="light" style="left: 4%; top: 10%;"></div>
        <div class="light" style="left: 30%; top: 30%;"></div>
    </div>
</div>
</body>
</html>